<template>
	<view class="repair-wrap">
		<view class="repair-box  u-p-l-30 u-p-r-30" style="margin-top: -20px;">
			<view class="header-form">
				<view class="header-li">
					<view class="header-name">
						<h3><text style="color: red;">*</text> 已退押金</h3>
					</view>
					<textarea v-model="ruleForm.deposit" placeholder="请输入" placeholder-style="font-size:30rpx;"
						class="text-area"></textarea>
				</view>
				<view class="header-li">
					<view class="header-name">
						<h3><text style="color: red;">*</text>水表数</h3>
					</view>
					<textarea v-model="ruleForm.water_table" placeholder="请输入" placeholder-style="font-size:30rpx;"
						class="text-area"></textarea>
				</view>
				<view class="header-li">
					<view class="header-name">
						<h3><text style="color: red;">*</text>电表数</h3>
					</view>
					<textarea v-model="ruleForm.power_table" placeholder="请输入" placeholder-style="font-size:30rpx;"
						class="text-area"></textarea>
				</view>
				<view class="header-li">
					<view class="header-name">
						<h3><text style="color: red;">*</text>天然气数</h3>
					</view>
					<textarea v-model="ruleForm.cng_table" placeholder="请输入" placeholder-style="font-size:30rpx;"
						class="text-area"></textarea>
				</view>
				<view class="header-li">
					<view class="header-name">
						<h3><text style="color: red;">*</text>退租原因</h3>
					</view>
					<textarea v-model="ruleForm.reason" placeholder="请输入" class="text_textarea"></textarea>
				</view>
			</view>
		</view>
		<view style="margin-top: 50px;padding-bottom: 50px;">
			<button class="yilingqu" @click="submint">确认提交</button>
		</view>

	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tool.js'
	export default {
		data() {
			return {
				type: 1,
				index: 0,
				index2: 0,
				index3: 0,
				index4: 0,

				array: ['分类', '分类二'],
				inday: 0,

				ruleForm: {
					ten_id: null, //租户id
					deposit: null,
					water_table: null,
					power_table: null,
					cng_table: null,
					reason: null

				},
				contarctList: [],
			}
		},
		onLoad(options) {
			if (options.id) {
				this.ruleForm.ten_id = options.id;
			}
		},
		methods: {
			//提交按钮
			submint() {
				if (!this.ruleForm.deposit) {
					return uni.showToast({
						title: '请输入已退押金',
						icon: 'none'
					})
				}
				if (!this.ruleForm.water_table) {
					return uni.showToast({
						title: '请输入水表数',
						icon: 'none'
					})
				}
				if (!this.ruleForm.power_table) {
					return uni.showToast({
						title: '请输入电表数',
						icon: 'none'
					})
				}
				if (!this.ruleForm.cng_table) {
					return uni.showToast({
						title: '请输入天然气数',
						icon: 'none'
					})
				}
				if (!this.ruleForm.reason) {
					return uni.showToast({
						title: '请输入退租原因',
						icon: 'none'
					})
				}
				console.log(this.ruleForm)
				this.$request.api.outTenAndIsVoid({
					id: this.ruleForm.ten_id,
					ten_id: this.ruleForm.ten_id,
					tenants_user_id: uni.getStorageSync('projectItem').userId,
					reason: this.ruleForm.reason,
					deposit: this.ruleForm.deposit,
					water_table: this.ruleForm.water_table,
					power_table: this.ruleForm.power_table,
					cng_table: this.ruleForm.cng_table,
					room_id: uni.getStorageSync('projectItem').roomId,
					operationType: 2,
				}).then(response => {
					if (response.data.code === 0) {
						//TODO 提示发布成功 跳转
						uni.showToast({
							title: '新增退租成功！',
							icon: 'success'
						});
						this.$Router.push({
							path: '/pages/rentsale/tenantList'
						})
					} else {
						//TODO 提示发布失败
						uni.showToast({
							title: '请检查参数或联系管理员！',
							icon: 'error'
						});
					}
				})

			},
		}
	}
</script>


<style lang="scss">
	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}

	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}

	.active {
		position: relative;
		color: #F9A832;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		background-color: #F9A832;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}

	.button {
		height: 40px;
		line-height: 40px;
		width: 34%;
		border-radius: 33px;
		border: 1px solid #CCCCCC;
	}

	.button1 {
		height: 40px;
		line-height: 40px;
		width: 80%;
		border-radius: 33px;
		border: 1px solid #F9A832;
		color: #FFFFFF;
		background-color: #F9A832;
	}

	.button:hover {
		border: 1px solid #F9A832;
		color: #FFFFFF;
		background-color: #F9A832;
	}

	.header-form {
		margin-top: 60rpx;
		background: #FFFFFF;

		.header-li {
			// padding:0 45rpx;
			display: flex;
			// align-items: center;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			line-height: 95rpx;
			color: #333333;
			border-bottom: 1rpx solid #EEEEEE;

			.header-name {
				width: 200rpx;
			}

			.text-area {
				margin-left: 10px;
				width: 420rpx;
				padding-top: 26rpx;
				height: 60rpx;
			}
		}
	}

	.guarn-box {
		width: 100%;
		height: 165px;
	}

	.guarn-box-img {
		width: 87%;
		height: 55%;
		float: left;
		margin-right: 24rpx;
		text-align: center;
		border: 5rpx solid #ccc;
		border-radius: 4rpx;
		margin-left: 72rpx;
		margin-top: 10px
	}

	.guarn-box-img image {
		width: 76rpx;
		height: 34px;
	}

	.header-li {
		display: flex;
		// align-items: center;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 102rpx;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.foot_item {
		margin-top: 40rpx;
		height: 280rpx;
	}

	.button2 {
		width: 40%;
		height: 30%;
		float: left;
		margin-left: 33px;
		color: #F9A832;
		border: 1px solid #F9A832;
		background-color: #ffffff;
		border-top-left-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
	}

	.button_in {
		width: 40%;
		height: 31%;
		float: right;
		background-color: #F9A832;
		margin-right: 34px;
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}

	.button_renovation {
		width: 31%;
		font-size: 10px;
		border-radius: 11px;
		border: 1px solid #2986FF;
		background-color: rgb(255, 255, 255);
		margin-right: 249px;
		color: #2986FF;
		margin-top: 20px;
	}

	.footers {
		width: 100%;
		background-color: #FFFFFF;
		height: 72px;
		position: fixed;
		bottom: 0px;
		left: 0px;
	}

	.footer {
		width: 95%;
		margin: 40rpx 20rpx;
		// position:fixed;
		// bottom:0px;
		// left:0px;
	}

	.footer-btn {
		// display: flex;
		width: 150rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin-left: 300rpx;
		float: right;
		text-align: center;
		background-color: #F9A832;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}

	.details {
		color: #FFFFFF;

	}

	.button5 {
		position: relative;
		// left: 264rpx;
		top: -46rpx;
	}

	.payment {
		width: 50px;
		height: 50px;
		border: 1px solid #C0C0C0;
		border-radius: 12px;
	}

	.payment_img {
		width: 35px;
		margin-top: 10px;
		margin-left: 7px;
	}

	.payment:hover {
		border: 1px solid #F9A832;
		cursor: hand;
	}

	.form-select {
		width: 480rpx;
		background: url(../../static/image/right.png) no-repeat center right;
		background-size: 10rpx 17rpx;
	}

	.header-li1 {
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
		margin-top: 20px;
	}

	.borders {
		width: 19%;
		line-height: 35px;
		border-radius: 17px;
		text-align: center;
		border: 1px solid #CCCCCCFF;
		margin-top: 14px;
	}

	.borders:hover {
		width: 19%;
		line-height: 35px;
		border-radius: 17px;
		text-align: center;
		border: 1px solid #FFF9A832;
		background-color: #FFF9A832;
		margin-top: 14px;
	}

	.guarn-box-txt {
		width: 420rpx;
		height: 216rpx;
		color: #999;
		float: left;
	}

	.yilingqu {
		width: 80%;
		height: 84rpx;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}

	.guarn-box {}

	.guarn-box2 {
		display: flex;
	}

	.guarn-box2-img {
		width: 216rpx;
		height: 216rpx;
		margin-right: 20rpx;
		position: relative;

		.guarn-box2-img-close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}

	.guarn-box2 image {
		width: 216rpx;
		height: 216rpx;
	}

	.guarn-box-img {
		width: 88%;
		height: 60%;
		float: left;
		margin-right: 12px;
		text-align: center;
		border: 1px solid #ccc;
		border-radius: 2px;
	}

	.guarn-box-img image {
		width: 76rpx;
		height: 68rpx;
	}

	.text_textarea {
		padding: 28rpx 0 28rpx 30rpx;
		font-size: 30rpx;
		height: 200rpx;
	}
</style>